<template>
	<view style="height: 20rpx"></view>
	<view @tap="toDetail(item.userId)" class="item flex-row" v-for="item in list" :key="item.userId">
		<xbc-avatar :src="item.avatar" size="40px" />
		<view class="title">{{ item.name }}</view>
	</view>
	<view style="height: 20rpx"></view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import XBCIM from 'xbcim'

const list = ref([])

function toDetail(userId: string) {
	uni.navigateTo({
		url: `/pages/contact/detail?userId=${userId}`
	})
}

async function getList() {
	list.value = await XBCIM.getBlackList()
}

getList()
</script>

<style lang="scss" scoped>
.item {
	padding: 20rpx 30rpx;

	.title {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		margin-left: 30rpx;
		@include line-height(80rpx);
	}
}
</style>